<script setup lang="ts">
  import { ref, onMounted } from 'vue';
  import { toDetail } from '@/utils/utils';
  import SelectCom from '@/views/policyai/policyselect/selectPolicy/index.vue';
  import List from '@/views/policyai/policyselect/list/list.vue';
  import ChinaMap from '@/views/policyai/components/ehcarts.vue';
  import { getai } from '@/api/global';
  import { Message, Spin } from '@arco-design/web-vue';
  import useLoading from '@/hooks/loading';
  import { getindustry, getpolicy_direction } from '@/api/dataCenter';
  import { getpolicyNumer } from '@/api/policy';
  import { useUserStore } from '@/store';
  import Add from '@/views/policyai/policydate/add/index.vue';
  const userStore = useUserStore();
  import showDetail from './detail/index.vue';
  const visible = ref(false);
  const currentContend = ref();
  // 定义类型接口
  interface FieldItem {
    field_id: number;
    field_name: string;
    field_sort: number;
    field_icon: string;
    create_time: string;
    policy_count: number;
  }

  interface CountsData {
    [key: string]: number;
  }

  interface RequestData {
    ok: boolean;
    code: number;
    msg: string;
    data: {
      counts: CountsData;
      total: number;
    };
    debug: any[];
  }

  // 分类关键词映射表
  const CATEGORY_KEYWORDS = {
    电子信息: [
      '电子',
      '信息',
      '芯片',
      '半导体',
      '软件',
      '人工智能',
      '大数据',
      '通信',
    ],
    生物与新医药: ['生物', '医药', '医疗', '疫苗', '基因', '制药', '医疗器械'],
    航空航天: ['航空', '航天', '飞机', '卫星', '火箭', '航天器'],
    新材料: ['材料', '新型材料', '纳米材料', '复合材料', '高分子材料'],
    高技术服务: ['高技术', '科技服务', '研发服务', '技术咨询', '知识产权'],
    新能源与节能: ['新能源', '光伏', '风电', '储能', '节能', '氢能', '锂电池'],
    资源与环境: ['资源', '环境', '环保', '污染', '废弃物', '生态', '可持续'],
    先进制造与自动化: ['制造', '自动化', '智能制造', '工业', '机器人', '机床'],
    文化领域: ['文化', '艺术', '文物', '非遗', '出版', '传媒', '创意'],
    金融业: ['金融', '银行', '保险', '证券', '基金', '贷款', '融资'],
    住宿和餐饮业: ['住宿', '餐饮', '酒店', '饭店', '旅游住宿', '餐饮服务'],
    房地产业: ['房地产', '房产', '物业', '建筑', '住宅', '开发商'],
    租赁和商务服务业: ['租赁', '商务', '服务', '租赁服务', '商务咨询', '会展'],
    娱乐业: ['娱乐', '影视', '游戏', '演出', '文旅', '休闲'],
    农业: ['农业', '农民', '农村', '农田', '种植', '养殖', '农机', '农资'],
  };

  const props = defineProps<{
    dataSource?: {
      filedList?: FieldItem[];
      [key: string]: any;
    };
  }>();

  // 匹配并更新政策数量的函数（带类型定义）
  function matchAndUpdatePolicyCount(
    requestData: RequestData,
    renderData: FieldItem[]
  ): FieldItem[] {
    const counts = requestData.data?.counts || {};
    return renderData.map((item) => {
      const fieldName = item.field_name;
      if (counts.hasOwnProperty(fieldName)) {
        return { ...item, policy_count: counts[fieldName] };
      }
      return item;
    });
  }

  const { loading, setLoading } = useLoading(false);

  // 响应式变量
  const questionText = ref('');
  const policyData = ref<Record<string, any[]>>({}); // 存储各领域政策数据
  const processedFields = ref<FieldItem[]>([]); // 存储处理后的领域列表
  const list = ref<any>({ data: [] });

  // 所有领域列表
  const domains = [
    '电子信息',
    '生物与新医药',
    '航空航天',
    '新材料',
    '高技术服务',
    '新能源与节能',
    '资源与环境',
    '先进制造与自动化',
    '文化领域',
    '金融业',
    '住宿和餐饮业',
    '房地产业',
    '租赁和商务服务业',
    '娱乐业',
    '农业',
    '其他',
  ];

  // 领域点击事件 - 匹配关键词并执行搜索
  const handleFieldClick = (data: FieldItem) => {
    const keywords =
      CATEGORY_KEYWORDS[data.field_name as keyof typeof CATEGORY_KEYWORDS] ||
      [];

    if (keywords.length > 0) {
      const searchText = `${data.field_name} 相关政策，包括: ${keywords.join(
        '、'
      )}`;
      questionText.value = searchText;
      handleSend();
    } else {
      questionText.value = data.field_name;
      handleSend();
    }
  };

  // 批量请求所有领域政策数据
  const fetchAllPolicyData = async () => {
    loading.value = true;
    try {
      const requests = domains.map((domain) => getai({ question: domain }));
      const results = await Promise.all(requests);

      domains.forEach((domain, index) => {
        policyData.value[domain] = results[index]?.data || [];
      });

      Message.success('所有领域政策数据加载完成');
      console.log('政策数据汇总:', policyData.value);
    } catch (error) {
      console.error('批量请求失败:', error);
      Message.error('数据加载失败，请稍后重试');
    } finally {
      loading.value = false;
    }
  };

  // 发送按钮点击事件（含去重处理）
  const handleSend = () => {
    if (!questionText.value.trim()) {
      return false;
    }
    setLoading(true);
    getai({
      question: questionText.value,
    })
      .then((res) => {
        console.log('加载结果', res);
        const originalData = res.data?.data || [];

        // 去重逻辑：根据filename去重，保留第一个出现的项
        const seenFilenames = new Set<string>();
        const uniqueData = originalData.filter((item) => {
          if (typeof item.filename === 'string') {
            if (!seenFilenames.has(item.filename)) {
              seenFilenames.add(item.filename);
              return true;
            }
            return false;
          }
          // 保留没有filename或类型不符的项
          return true;
        });

        list.value = {
          ...res.data,
          data: uniqueData,
        };
        setLoading(false);
      })
      .catch((error) => {
        console.error('请求失败', error);
        Message.error('请求失败，请稍后重试');
        setLoading(false);
      });
  };

  // 组件挂载时加载数据（含初始数据去重）
  onMounted(() => {
    setLoading(true);
    getpolicyNumer()
      .then((res: RequestData) => {
        if (props.dataSource?.filedList) {
          processedFields.value = matchAndUpdatePolicyCount(
            res,
            props.dataSource.filedList
          );
        }
        getai({
          question: '绵阳市涪城区所有政策',
        })
          .then((res) => {
            const originalData = res.data?.data || [];

            // 初始数据去重处理
            const seenFilenames = new Set<string>();
            const uniqueData = originalData.filter((item) => {
              if (typeof item.filename === 'string') {
                if (!seenFilenames.has(item.filename)) {
                  seenFilenames.add(item.filename);
                  return true;
                }
                return false;
              }
              return true;
            });

            list.value = {
              ...res.data,
              data: uniqueData,
            };
            setLoading(false);
          })
          .catch((error) => {
            console.error('请求失败', error);
            Message.error('请求失败，请稍后重试');
            setLoading(false);
          });
      })
      .catch((error) => {
        console.error('获取政策数量失败', error);
        Message.error('获取领域数据失败');
      });
  });

  const showContent = (data: any) => {
    if (data?.content) {
      visible.value = true;
      currentContend.value = data.content;
    } else {
      window.open(data.file_path);
    }
  };
  const downloadFile = (data: any) => {
    const filePath = data.file_path;
    window.open(
      filePath,
      '_blank',
      'width=800,height=600,top=100,left=100,toolbar=yes,scrollbars=yes'
    );
  };
</script>

<template>
  <div>
    <a-row style="width: 89.4vw; margin-top: 10px" :gutter="20">
      <a-col :span="3">
        <a-menu
          :default-open-keys="['0']"
          :default-selected-keys="['0_2']"
          show-collapse-button
          breakpoint="xl"
        >
          <div
            style="
              color: #4e5969;
              font-size: 12px;
              margin-top: 10px;
              margin-bottom: 10px;
              padding-left: 12px;
            "
            >适用领域</div
          >
          <div v-for="(item, index) in processedFields" :key="item.field_id">
            <a-menu-item :key="item.field_id" @click="handleFieldClick(item)">
              <template #icon>
                <svg-icon
                  :name="item.field_icon"
                  style="height: 1.3em; width: 1.3em"
                />
              </template>
              <span style="margin-left: 2px">
                {{ item.field_name }}
                <span style="margin-left: 5px; font-size: 12px; color: #888">
                  ({{ item.policy_count }})
                </span>
              </span>
            </a-menu-item>
          </div>
        </a-menu>
      </a-col>

      <a-col
        :span="20"
        style="scrollbar-width: none; scrollbar-color: transparent transparent"
      >
        <a-row>
          <a-col :span="24">
            <div class="chat-entry">
              <img
                src="https://qzd-web-group-oss.qizhidao.com/pc/static/prod/-/img/bg.03e68ed.jpg"
                alt="背景图"
                class="chat-entry-bg"
                data-v-044ac26a=""
                data-v-ab7ce7c8=""
              />
              <div
                class="chat-entry-body"
                data-v-044ac26a=""
                data-v-ab7ce7c8=""
              >
                <div class="chat-entry-header">
                  <div
                    class="chat-entry-header-left"
                    data-v-044ac26a=""
                    data-v-ab7ce7c8=""
                  >
                    <img
                      src="https://qzd-web-group-oss.qizhidao.com/pc/static/prod/-/img/robot.706570e.png"
                      class="chat-entry-header-icon"
                      alt="科秘智能AI图标"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                    />
                    <!--                    <span-->
                    <!--                      class="chat-entry-header-t1"-->
                    <!--                      data-v-044ac26a=""-->
                    <!--                      data-v-ab7ce7c8=""-->
                    <!--                      >科秘智能AI</span-->
                    <!--                    >-->
                    <span
                      class="chat-entry-header-t1"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                      >科秘智能AI</span
                    >
                    <span
                      class="chat-entry-header-t2"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                      >致力打造汇聚380亿政策数据专属模型</span
                    >
                  </div>
                </div>
                <div
                  class="chat-entry-content"
                  data-v-044ac26a=""
                  data-v-ab7ce7c8=""
                >
                  <div
                    class="chat-entry-content-input"
                    data-v-044ac26a=""
                    data-v-ab7ce7c8=""
                  >
                    <textarea
                      maxlength="3000"
                      rows="2"
                      v-model="questionText"
                      placeholder="请输入您想问的相关政策问题... Shift+Enter换行"
                      class="chat-entry-content-input-inner"
                    ></textarea>
                    <span class="chat-entry-content-tip">
                      <svg
                        aria-hidden="true"
                        t="1754444832731"
                        class="symbol-icon chat-entry-content-tip-icon icon"
                        viewBox="0 0 1024 1024"
                        version="1.1"
                        xmlns="http://www.w3.org/2000/svg"
                        p-id="9001"
                        width="200"
                        height="200"
                      >
                        <path
                          d="M943.36 604.48l-108.48-189.568 46.464-88.96a24.768 24.768 0 0 0 5.44-30.976l-59.648-107.52a25.6 25.6 0 0 0-20.928-11.648H584.704L535.04 89.088a23.232 23.232 0 0 0-17.728-12.352H400.384a24.768 24.768 0 0 0-20.928 12.352v4.736l-110.72 189.568H162.624a24.832 24.832 0 0 0-21.76 11.52l-61.12 108.352a27.84 27.84 0 0 0 0 24.768l109.952 191.104-49.536 86.72a27.84 27.84 0 0 0 0 24.704l56.512 99.072c4.608 7.616 12.8 12.288 21.76 12.288h221.44l53.44 92.8a25.536 25.536 0 0 0 19.392 12.48h125.44a24.768 24.768 0 0 0 20.928-12.416l109.184-191.104h97.536a27.136 27.136 0 0 0 20.992-13.12l56.512-99.84a23.872 23.872 0 0 0 0-26.24z m-137.152 12.416l-56.512-104.512-232.32 409.28-63.552-104.448H221.44l55.808-101.376h118.464l-232.384-407.68h121.6L400.384 102.4l58.112 101.376-59.648 104.448h464.64l-58.816 103.68 116.992 204.992h-115.456z"
                          p-id="9002"
                        ></path>
                        <path
                          d="M501.76 671.168l148.224-233.472H352.832l148.992 233.472z"
                          p-id="9003"
                        ></path>
                      </svg>
                      通义千问-Qwen3 深度推理模型
                    </span>
                    <span data-v-ab7ce7c8="" data-v-044ac26a="">
                      <div
                        role="tooltip"
                        id="el-popover-3078"
                        aria-hidden="true"
                        class="el-popover el-popper chat-entry-content-tip-popover el-popover--plain"
                        style="width: undefinedpx; display: none"
                        tabindex="0"
                        >请输入您想问的政策问题</div
                      >
                      <span class="el-popover__reference-wrapper">
                        <button
                          v-if="!loading"
                          @click="handleSend"
                          :class="{
                            'chat-entry-content-btn': true,
                            'chat-entry-content-btn-disabled':
                              !questionText.trim(),
                          }"
                          :disabled="!questionText.trim()"
                        >
                          发送
                        </button>

                        <a-space class="chat-entry-content-btnA" v-else>
                          <a-spin dot size="5" />
                        </a-space>
                      </span>
                    </span>
                  </div>
                  <div
                    class="chat-entry-content-tool"
                    style="margin-top: 15px; display: flex"
                  >
                    <span class="chat-entry-content-tool-item">
                      <img
                        src="https://public-oss.qizhidao.com/APP/202502/9a1dd5387b364bcfb91351e74279bc02.png"
                        class="chat-entry-content-tool-item-icon"
                        alt="研发助手图标"
                        data-v-044ac26a=""
                        data-v-ab7ce7c8=""
                      />
                      <span data-v-044ac26a="" data-v-ab7ce7c8=""
                        >研发助手</span
                      >
                    </span>
                    <span
                      class="chat-entry-content-tool-item"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                    >
                      <img
                        src="https://public-oss.qizhidao.com/APP/202502/181eadfb738344c78c97860ce7d1c9ad.png"
                        class="chat-entry-content-tool-item-icon"
                        alt="技术交底图标"
                        data-v-044ac26a=""
                        data-v-ab7ce7c8=""
                      />
                      <span data-v-044ac26a="" data-v-ab7ce7c8=""
                        >技术交底</span
                      >
                    </span>
                    <span
                      class="chat-entry-content-tool-item"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                    >
                      <img
                        src="https://public-oss.qizhidao.com/APP/202502/2992bb3eeddf4847847287682a101855.png"
                        class="chat-entry-content-tool-item-icon"
                        alt="专利检索图标"
                        data-v-044ac26a=""
                        data-v-ab7ce7c8=""
                      />
                      <span data-v-044ac26a="" data-v-ab7ce7c8=""
                        >专利检索</span
                      >
                    </span>
                    <span
                      class="chat-entry-content-tool-item"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                    >
                      <img
                        src="https://public-oss.qizhidao.com/APP/202502/19a8ea79dbe44c2e8ca46009dbe4cc8d.png"
                        class="chat-entry-content-tool-item-icon"
                        alt="政策通图标"
                        data-v-044ac26a=""
                        data-v-ab7ce7c8=""
                      />
                      <span data-v-044ac26a="" data-v-ab7ce7c8="">政策通</span>
                    </span>
                    <span
                      class="chat-entry-content-tool-item"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                    >
                      <img
                        src="https://public-oss.qizhidao.com/APP/202502/f14512f4ed5d4ea293b79232743aa0e7.png"
                        class="chat-entry-content-tool-item-icon"
                        alt="AI文献解读图标"
                        data-v-044ac26a=""
                        data-v-ab7ce7c8=""
                      />
                      <span data-v-044ac26a="" data-v-ab7ce7c8=""
                        >AI文献解读</span
                      >
                    </span>
                    <span
                      class="chat-entry-content-tool-item"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                    >
                      <img
                        src="https://public-oss.qizhidao.com/APP/202502/7558ce0103a34cbd99390b1ae10c11ff.png"
                        class="chat-entry-content-tool-item-icon"
                        alt="AI技术百科图标"
                        data-v-044ac26a=""
                        data-v-ab7ce7c8=""
                      />
                      <span data-v-044ac26a="" data-v-ab7ce7c8=""
                        >AI技术百科</span
                      >
                    </span>
                    <span
                      class="chat-entry-content-tool-item"
                      data-v-044ac26a=""
                      data-v-ab7ce7c8=""
                    >
                      <img
                        src="https://public-oss.qizhidao.com/APP/202502/8c8a0af3554a404f9986b66f1c7844da.png"
                        class="chat-entry-content-tool-item-icon"
                        alt="AI商标起名图标"
                        data-v-044ac26a=""
                        data-v-ab7ce7c8=""
                      />
                      <span data-v-044ac26a="" data-v-ab7ce7c8=""
                        >AI商标起名</span
                      >
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </a-col>
        </a-row>
        <a-row
          v-if="!loading"
          style="
            background: #fff;
            box-sizing: border-box;
            border-radius: 10px;
            padding: 20px;
            margin-top: 25px;
          "
        >
          <a-col :span="24">
            <a-list
              style="width: 100%; margin-top: -10px"
              :bordered="false"
              :loading="loading"
            >
              <a-list-item v-for="item in list.data" :key="item.id">
                <a-row class="listItem">
                  <a-col :span="22" class="item">
                    <div class="title" @click="showContent(item)">
                      {{ item.filename }}
                    </div>
                  </a-col>
                  <a-col :span="2" flex style="text-align: right">
                    <a-button
                      size="small"
                      type="primary"
                      @click="downloadFile(item)"
                    >
                      下载政策
                    </a-button>
                  </a-col>
                </a-row>
              </a-list-item>
            </a-list>
          </a-col>
        </a-row>
        <a-row
          v-else
          style="
            background: #fff;
            box-sizing: border-box;
            border-radius: 10px;
            padding: 20px;
            margin-top: 25px;
          "
        >
          <div style="width: 100%">
            <a-skeleton
              :animation="true"
              style="margin-bottom: 20px"
              v-for="(item, index) in 3"
              :key="index"
            >
              <a-space
                direction="vertical"
                :style="{ width: '100%' }"
                size="large"
              >
                <a-skeleton-line :rows="3" />
                <a-space>
                  <a-skeleton-shape size="small" />
                  <a-skeleton-shape size="small" />
                  <a-skeleton-shape size="small"
                /></a-space>
              </a-space>
            </a-skeleton>
          </div>
        </a-row>
      </a-col>
    </a-row>

    <showDetail
      v-if="visible"
      v-model:visible="visible"
      :content="currentContend"
    />
  </div>
</template>

<style scoped lang="less">
  .chat-entry {
    width: 100%;
    margin: 0 auto;
    padding: 18px 18px 0;
    border-radius: 12px;
    position: relative;
  }
  .chat-entry-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 197px;
    border-radius: 12px;
    z-index: 0;
  }
  .chat-entry-body {
    position: relative;
    z-index: 1;
  }
  .chat-entry-header {
    display: flex;
    align-items: center;
    color: #fff;
    padding-bottom: 10px;
    height: 54px;
    justify-content: space-between;
  }
  .chat-entry-content {
    background: #fff;
    box-shadow: 0 2px 40px 0 rgba(0, 66, 249, 0.2);
    border-radius: 12px;
    padding: 22px;
  }
  .chat-entry-header-left,
  .chat-entry-header-right {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .chat-entry-header-icon {
    width: 48px;
    margin-right: 10px;
  }
  .chat-entry-header-t1 {
    font-family: PingFangSC-Semibold;
    font-size: 26px;
    letter-spacing: 0;
    line-height: 30px;
    font-weight: 600;
  }
  .chat-entry-header-t2 {
    opacity: 0.85;
    font-family: PingFangSC-Medium;
    font-size: 14px;
    line-height: 22px;
    font-weight: 500;
    margin-left: 10px;
  }
  .chat-entry-content-input-inner {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid #ededed;
    background: #f3f5f9;
    border-radius: 10px;
    font-size: 16px;
    color: #292a2d;
    line-height: 22px;
    font-weight: 400;
    transition: all 0.3 sease-out;
    outline: none;
    scrollbar-gutter: stable;
    box-sizing: border-box;
    display: block;
    overflow-y: auto;
    resize: none;
    padding: 14px 100px 50px 18px;
  }
  .chat-entry-content-tip {
    color: #637698;
    letter-spacing: 0;
    width: 980px;
    font-weight: 400;
    position: absolute;
    background: #f3f5f9;
    height: 35px;
    top: 150px;
    left: 40px;
    padding: 10px 0;
    bottom: 2px;
    display: flex;
    align-items: center;
  }
  .chat-entry-content-tip-icon {
    fill: #8e9cb5;
    margin-right: 7px;
    width: 16px;
    height: 16px;
  }
  .chat-entry-content-input-inner:hover {
    border: 2px solid transparent;
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(90deg, #f3f5f9, #f3f5f9),
      linear-gradient(90deg, #578aef, #8f41e9);
  }
  .chat-entry-content-btnA {
    width: 72px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    border: none;
    right: 50px;
    top: 106px;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    background-image: linear-gradient(
        193deg,
        rgba(0, 246, 255, 0.5),
        rgba(0, 245, 255, 0) 31%
      ),
      radial-gradient(
        circle at 79% 83%,
        rgba(255, 0, 218, 0.31) 0,
        rgba(240, 23, 223, 0.3) 12%,
        rgba(214, 64, 231, 0.23) 38%,
        rgba(253, 42, 255, 0.1) 59%
      ),
      linear-gradient(187deg, rgba(22, 92, 247, 0) 64%, rgba(35, 82, 214, 0.49)),
      linear-gradient(-8deg, rgba(216, 83, 218, 0) 38%, #d11eff),
      linear-gradient(-88deg, #46dfff, #2964f0 98%);
    border-radius: 28px;
    cursor: pointer;
    align-self: center;
  }
  .chat-entry-content-btn {
    width: 72px;
    height: 44px;
    line-height: 44px;
    position: absolute;
    border: none;
    right: 50px;
    top: 106px;
    font-family: PingFangSC-Semibold;
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    background-image: linear-gradient(
        193deg,
        rgba(0, 246, 255, 0.5),
        rgba(0, 245, 255, 0) 31%
      ),
      radial-gradient(
        circle at 79% 83%,
        rgba(255, 0, 218, 0.31) 0,
        rgba(240, 23, 223, 0.3) 12%,
        rgba(214, 64, 231, 0.23) 38%,
        rgba(253, 42, 255, 0.1) 59%
      ),
      linear-gradient(187deg, rgba(22, 92, 247, 0) 64%, rgba(35, 82, 214, 0.49)),
      linear-gradient(-8deg, rgba(216, 83, 218, 0) 38%, #d11eff),
      linear-gradient(-88deg, #46dfff, #2964f0 98%);
    border-radius: 28px;
    cursor: pointer;
    align-self: center;
  }
  .chat-entry-content-btn:hover {
    opacity: 0.8;
  }
  .chat-entry-content-tool-item {
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #637698;
    letter-spacing: 0;
    line-height: 22px;
    font-weight: 400;
    margin-right: 34px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  .chat-entry-content-tool-item-icon {
    width: 22px;
    height: 22px;
    margin-right: 2px;
  }
  .chat-entry-content-btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }
  .listItem {
    padding: 10px;
    .title {
      font-size: 18px;
      color: #292a2d;
      line-height: 28px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      font-weight: 500;
      cursor: pointer;
      text-align: left;
      &:hover {
        color: #3981f4;
      }
    }
  }
</style>
